function detailjs() {
    //登录信息
    if(localStorage.getItem("username1")){
        let username = JSON.parse(localStorage.getItem("username1"));
        console.log(username);
        $(".denglu").html("欢迎用户：" + username);
    };
    


    //根据商品id获取商品详情
    var prodid = location.search.split("=")[1];
    //进入我的购物车
    $(".mycart").eq(0).click(function () {
        location.href = "./cart.html?pid=" + prodid;
    });
    //返回商品页
    $(".mylist").eq(0).click(function () {
        location.href = "../list.html";
    });


    $.ajax({
        url: "http://jx.xuzhixiang.top/ap/api/detail.php",
        type: "get",
        data: {
            id: prodid,
        },
        success: function (data) {
            var data = data.data;
            let str = "";
            str = `
            <div class="detu">
                <div class="smallpic">
                    <img src="${data.pimg}" alt="">
                    <div class="zoom"></div>
                </div>
                <div class="bigpic">
                    <img src="${data.pimg}" alt="">
                </div>
            </div>
            <div class="demas">
                <div class="title"><h1>商品名称：&nbsp;${data.pname}</h1></div>
                <div class="demas-main">
                    <div><h3>价格：${data.pprice}&nbsp;元</h3></div>
                    <div><h3>商品id：${data.pid}</h3></div>
                    <div><h3>商品介绍：${data.pdesc}</h3></div>
                </div>
                <div class="demas-num">
                    <div>
                        <div><input class="num" value="1" type="number"></div>
                        <button class="btn">+</button>
                        <button class="btn">-</button>
                        <div class="jiarugwc">加入购物车</div>
                    </div>
                </div>
            </div>
            `;

            $(".depro").html(str);
            $(".btn").eq(0).click(function () {
                $(".num").get(0).value++;

            });
            $(".btn").eq(1).click(function () {
                $(".num").get(0).value--;
                if ($(".num").get(0).value == 0) {
                    $(".num").get(0).value = 1;
                }

            });
            $(".jiarugwc").click(function () {
                let num = $(".num").get(0).value;
                var userid = JSON.parse(localStorage.getItem("userid"));
                $.ajax({
                    url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
                    type: "get",
                    data: {
                        uid: userid,
                        pid: prodid,
                        pnum: num,
                    },
                    success: function (data) {
                        console.log(data);
                    }
                });
                alert("加入成功");
                // location.href = "../list.html";


            });

            //放大镜
            $(".smallpic").hover(function(){
                $(".zoom").show();
                $(".bigpic").show();
               
            },function(){
                $(".zoom").hide();
                $(".bigpic").hide();
            });
            $(".smallpic").mousemove(function(e){
                console.log(e.target);
               
                var maxW = $(".smallpic").outerWidth() - $(".zoom").outerWidth();
                var maxH = $(".smallpic").outerHeight() - $(".zoom").outerHeight();



                var l = e.pageX - $(".smallpic").offset().left - $(".zoom").outerWidth() / 2;
                var t = e.pageY - $(".smallpic").offset().top - $(".zoom").outerHeight() / 2;

                l = l <= 0 ? 0 : l >= maxW ? maxW : l;
                t = t <= 0 ? 0 : t >= maxH ? maxH : t;

                $(".zoom").css({
                    "left": l,
                    "top": t,
                });
 
 
                 $(".bigpic img").css({
                     "left": -$(".zoom").position().left / $(".smallpic").outerWidth() * $(".bigpic img")
                         .width(),
                     "top": -$(".zoom").position().top / $(".smallpic").outerHeight() * $(".bigpic img")
                         .height(), 
                 });

            });



        }








    });




















};